import { Row, Col, Space } from 'antd'
import { FC, memo, useRef } from 'react'
import DogForm from '@/components/Form'
import { IFormRef } from '@/components/Form/form'
import { CustomRule } from '@/components/Form/useStore'
import DogInput from '@/components/Input'
import DogButton from '@/components/Button/button'
import { useMount } from 'ahooks'

const DogFormComponent: FC = () => {
  const ref = useRef<IFormRef>(null)
  useMount(() => {
    setTimeout(() => {
      ref.current?.setFieldValue('email', '123456789@qq.com')
    })
  })
  const confirmRules: CustomRule[] = [
    { type: 'string', required: true, min: 3, max: 8 },
    // useStore 传入的方法 getFieldValue
    ({ getFieldValue }) => ({
      // asyncValidator - RuleItem 中自带的异步校验
      asyncValidator(rule, value) {
        return new Promise((resolve, reject) => {
          if (value !== getFieldValue('password')) {
            reject('The two passwords that you entered do not match!')
          }
          setTimeout(() => resolve(), 300)
        })
      }
    })
  ]
  return (
    <DogForm initialValues={{ username: 'zhangsan', agreement: true }} ref={ref}>
      {({ isValid, isSubmitting }) => (
        <Row>
          <Col span={12}>
            <DogForm.Item label="用户" name="username" rules={[{ type: 'string', required: true }]}>
              <DogInput placeholder="请输入用户名" />
            </DogForm.Item>
          </Col>
          <Col span={12}>
            <DogForm.Item label="邮箱" name="email" rules={[{ type: 'email', required: true }]}>
              <DogInput placeholder="请输入邮箱" type="email" />
            </DogForm.Item>
          </Col>
          <Col span={12}>
            <DogForm.Item label="密码" name="password" rules={[{ type: 'string', required: true, min: 3, max: 8 }]}>
              <DogInput placeholder="请输入密码" type="password" />
            </DogForm.Item>
          </Col>
          <Col span={12}>
            <DogForm.Item label="重复密码" name="confirmPwd" rules={confirmRules}>
              <DogInput type="password" />
            </DogForm.Item>
          </Col>
          <Col span={16}>
            <div className="agreement-section">
              <DogForm.Item
                name="agreement"
                rules={[{ type: 'enum', enum: [true], message: '请同意协议' }]}
                getValueFromEvent={(e) => e.target.checked} // 自定义获取值
                valuePropName="checked" // 标明对应的值
              >
                <input type="checkbox" />
              </DogForm.Item>
              <span className="agree-text">
                注册即代表你同意<a href="https://example.com">用户协议</a>
              </span>
            </div>
            <Space>
              <DogButton type="submit" btnType="primary">
                登陆
              </DogButton>
              <DogButton type="button" onClick={() => ref.current?.resetFields()}>
                重置
              </DogButton>
              <DogButton
                type="button"
                onClick={() => {
                  const result = ref.current?.getFieldsValue()
                  console.log('getFieldsValue 获取所有字段', result)
                }}
              >
                获取所有字段
              </DogButton>
            </Space>
          </Col>
        </Row>
      )}
    </DogForm>
  )
}
export default memo(DogFormComponent)
